<script setup>
import { useUserStore } from '@/stores/user_store';
import { ref } from 'vue'
import { loginByPswApi } from '@/apis/user'
const store = useUserStore()
// 是否勾选同意
const isAgreeed = ref(false)
// 表单数据
const formData = ref({
    mobile: '',
    password: '',
})
const formRef = ref(null)
const rules = ref({
    mobile: [
        {
            required: true,
            errorMessage: '手机号不能为空',
        },
        {
            pattern: /^1[3456789]\d{9}$/,
            errorMessage: '手机号格式不正确',
        },
    ],
    password: [
        {
            required: true,
            errorMessage: '密码不能为空',
        },
        {
            pattern: /^[a-zA-Z0-9_-]{6,16}$/,
            errorMessage: '密码格式不正确',
        },
    ],
})
// 登录
const login = async () => {
    // 校验输入内容
    if (!isAgreeed) return uni.showToast({ title: '请先同意协议', icon: 'none' })
    const data = await formRef.value.validate()

    console.log(data);
    // 调用登录接口
    const res = await loginByPswApi(data)
    console.log(res);
    uni.showToast({ title: '登录成功' })
    // 存储token
    store.setToken(res.token)
    uni.switchTab({
        url: '/pages/my/index',
    })
}
</script>
<template>
    <uni-forms class="login-form" ref="formRef" :rules="rules" :model-value="formData">
        <uni-forms-item name="mobile">
            <uni-easyinput :input-border="false" :clearable="false" placeholder="请输入手机号" v-model="formData.mobile"
                placeholder-style="color: #C3C3C5" />
        </uni-forms-item>
        <uni-forms-item name="password">
            <uni-easyinput type="password" placeholder="请输入密码" :input-border="false" placeholder-style="color: #C3C3C5"
                v-model="formData.password" />
        </uni-forms-item>
        <view class="agreement">
            <radio :checked="isAgreeed" color="#16C2A3" @click="isAgreeed = !isAgreeed" />
            我已同意
            <text class="link">用户协议</text>
            及
            <text class="link">隐私协议</text>
        </view>

        <button class="uni-button" @click="login">登 录</button>
        <navigator hover-class="none" class="uni-navigator" url=" "> 忘记密码？ </navigator>
    </uni-forms>
</template>

<script>
export default {
    options: {
        styleIsolation: 'shared',
    },
}
</script>

<style lang="scss">
@import './styles.scss';
</style>
